function cargarDatosPersonales()
{
	$("#opcionCuerpo").html("");
		$("#opcionTitulo").text("Datos personales");

			var tabla = $("<table>");
				
			//Nombre
			var fila1 = $("<tr>");
			var col1_1 = $("<td>");
			col1_1.append('<div class="ui-helper-reset">Nombre:</div>');
			var col1_2 = $("<td>");
			col1_2.append('<div><input type="text" id="nombre" class="text ui-widget-content ui-corner-all ac_input"></div>');
			fila1.append(col1_1);
			fila1.append(col1_2);
			tabla.append(fila1);
			
			//Apellido
			var fila2 = $("<tr>");
			var col2_1 = $("<td>");
			col2_1.append('<div class="ui-helper-reset">Primer apellido:</div>');
			var col2_2 = $("<td>");
			col2_2.append('<div><input type="text" id="apellido1" class="text ui-widget-content ui-corner-all ac_input"></div>');
			fila2.append(col2_1);
			fila2.append(col2_2);
			tabla.append(fila2);
			
			//Apellido2
			var fila3 = $("<tr>");
			var col3_1 = $("<td>");
			col3_1.append('<div class="ui-helper-reset">Segundo apellido:</div>');
			var col3_2 = $("<td>");
			col3_2.append('<div><input type="text" id="apellido2" class="text ui-widget-content ui-corner-all ac_input"></div>');
			fila3.append(col3_1);
			fila3.append(col3_2);
			tabla.append(fila3);
			
			//Provincia
			var fila4 = $("<tr>");
			var col4_1 = $("<td>");
			col4_1.append('<div class="ui-helper-reset">Provincia:</div>');
			var col4_2 = $("<td>");
			var listaProvincias = $("<select>");
			listaProvincias.attr("id","provincia");
			listaProvincias.width(200);
			col4_2.append(listaProvincias);
			fila4.append(col4_1);
			fila4.append(col4_2);
			tabla.append(fila4);
			//esta parte se completa en la llamada ajax
			
			//Fecha de nacimiento
			var fila3 = $("<tr>");
			var col3_1 = $("<td>");
			col3_1.append('<div class="ui-helper-reset">Fecha de nacimiento:</div>');
			var col3_2 = $("<td>");
			col3_2.append('<div><input type="text" id="nacimiento" class="text ui-widget-content ui-corner-all ac_input"></div>');
			fila3.append(col3_1);
			fila3.append(col3_2);
			tabla.append(fila3);
			
			
			$("#opcionCuerpo").append(tabla);
			//Cargar provincias y fecha de nacimiento
			$.getJSON("consultasAjax.php?seccion=listaProvincias",
			function(data){
				var listaProvincias = $("#provincia");
				$.each(data, function(i,provincia){
					listaProvincias.append('<option value="'+provincia.id+'">'+provincia.provincia+'</option>');
				});

				$("#provincia").combo();

			});
			
			//Cargamos la informacion del usuario
			$.getJSON("consultasAjax.php?seccion=informacionUsuario",
			function(data){
				//Calendario
				$('#nacimiento').attr("readonly","readonly");
				//console.debug(2);
				//console.debug($('#fecha').is(':data(datepicker)'));
				$('#nacimiento').datepicker({
					showButtonPanel: true,
					altFormat: 'dd-mm-yy',
					dateFormat: 'dd-mm-yy',
					dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
					dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
					dayNamesShort: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
					monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
					buttonText: 'Elegir',
					closeText: 'Cerrar',
					currentText: 'Hoy',
					changeYear: true,
					maxDate: new Date(),
					showOn: 'both', buttonImage: 'img/calendar.gif'
					/*beforeShow: function(input) {
						setTimeout(function (){
							$(".ui-datepicker-year").selectbox();
							$(".jquery-selectbox").width(55);
								},100);
						}*/
					});
					
					$("#nombre").val(data.nombre);
					$("#apellido1").val(data.apellido1);
					$("#apellido2").val(data.apellido2);
					var fechaHoy = new Date();
					var fechaNac = new Date();
					nacimiento = data.nacimiento.split("-");
					fechaNac.setFullYear(nacimiento[0],(nacimiento[1])-1,nacimiento[2]);
					//El datepicker funciona dandole la diferencia de dias, asi que converitmos
					//la fecha en la diferencia de dias
					//(fechaNac-fechaHoy)/1000/3600/24

					
					$('#nacimiento').datepicker( 'setDate' , (fechaNac-fechaHoy)/86400000 )
				
				
			});
				
				var botonGuardar = $('<a id="boton-guardarDatosPersonales" class="dialog_link ui-state-default ui-corner-all" href="javascript:void(0)"><span class="ui-icon ui-icon-disk"/>Guardar cambios</a>');
					botonGuardar.hover(
						function() { $(this).addClass('ui-state-hover'); }, 
						function() { $(this).removeClass('ui-state-hover'); }
					);
					
					botonGuardar.click(
						function() {
							$.getJSON("consultasAjax.php?seccion=guardarDatosPersonales",{ nombre: $("#nombre").val(), apellido1: $("#apellido1").val(), apellido2: $("#apellido2").val() ,provincia: $("#provincia").val(), nacimiento: $("#nacimiento").val() },
							function(data){
								if(data.error == 0)
								{
									$("#resultado").html('<div class="ui-state-highlight ui-corner-all" style="padding: 0pt 0.7em; margin-top: 20px;">'+
															'<p>'+
															'<span class="ui-icon ui-icon-info" style="float: left; margin-right: 0.3em;"/>'+
															'Datos guardados correctamente'+
															'</p>'+
															'</div>');
									mensajeSistema("Datos personales cambiados");
								}
								else
								{
									$("#resultado").html('<div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em; margin-top: 20px;">'+
															'<p>'+
															'<span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"/>'+
															'Error al guardar los cambios'+
															'</p>'+
															'</div>');
								}
								$("#resultado").fadeIn();
							});

							}
					);
					
				var botonAlmacen = $("<p align='center'>");
					botonAlmacen.append("<br>");
					botonAlmacen.append(botonGuardar);
					botonAlmacen.append("<br>");
					botonAlmacen.append("<br>");
					
		$("#opcionCuerpo").append("<div id='resultado'></div>");
		$("#opcionCuerpo").append(botonAlmacen);
}


function cargarAplicaciones()
{
	$("#opcionTitulo").text("Mis aplicaciones");
	$.getJSON("consultasAjax.php?seccion=listaWidgets",
	function(data){
		$("#opcionCuerpo").html('<div id="tabWidgets"> <ul> <li><a href="#tab-instalados">Instaladas</a></li><li><a href="#tab-noInstalados">Disponibles</a></li> </ul><div id="tab-instalados"></div><div id="tab-noInstalados"></div></div>');
		if(data.instalados == null)
		{
			$("#tab-instalados").append(										'<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">'+
											'<div class="portlet-header ui-widget-header ui-corner-all">Ninguna instalada'+
											'</div>'+
											'<div class="portlet-content"><div>No tienes ninguna aplicacion instalada</div>'+
											'</div>'+
										'</div>');
		}else{
			$.each(data.instalados, function(i,widget){
				$("#tab-instalados").append(										'<div id="widgetDialogo-'+widget.id+'" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">'+
												'<div class="portlet-header ui-widget-header ui-corner-all">'+ widget.id +
												'</div>'+
												'<div class="portlet-content"><div>'+ widget.descripcion + '</div>'+
												'<div>Instalable en: '+ widget.seccion + '</div>'+
												'</div>'+
											'</div>');
			});
		}
		
		if(data.noInstalados == null)
		{
			$("#tab-noInstalados").append(										'<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">'+
											'<div class="portlet-header ui-widget-header ui-corner-all">Ninguna disponible'+
											'</div>'+
											'<div class="portlet-content"><div>No tienes ninguna aplicacion mas disponible</div>'+
											'</div>'+
										'</div>');
		}else{
			$.each(data.noInstalados, function(i,widget){
				$("#tab-noInstalados").append('<div id="widgetDialogo-'+widget.id+'" class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="">'+
												'<div class="portlet-header ui-widget-header ui-corner-all">'+ widget.id +
												'</div>'+
												'<div class="portlet-content"><div>'+ widget.descripcion + '</div>'+
												'<div>Instalable en: '+ widget.seccion + '</div>'+
												'<div><br><a id="boton-instalar-'+widget.id+'" class="dialog_link ui-state-default ui-corner-all" href="javascript:void(0)"><span class="ui-icon ui-icon-wrench"/>Instalar</a><br><br></div>'+
												'</div>'+
											'</div>');
					
						$("#boton-instalar-"+widget.id).hover(
							function() { $(this).addClass('ui-state-hover'); }, 
							function() { $(this).removeClass('ui-state-hover'); }
						);
						
						$("#boton-instalar-"+widget.id).click(
							function() {
									$.getJSON("consultasAjax.php?seccion=gestionWidgets&activar="+widget.id,
									function(){
										mensajeSistema("Aplicacion "+widget.id+" instalada");
										var caja = $("#widgetDialogo-"+widget.id);
										caja.remove();
										$("#tab-instalados").append(caja);
										$("#boton-instalar-"+widget.id).parent().remove();
										});
							}
						);
			});
		}
		$("#tabWidgets").tabs();
		
	});

}

function cargarEditarPerfil()
{
	$("#opcionTitulo").text("Mi perfil");
	$.getJSON("consultasAjax.php?seccion=perfilUsuario",
	function(data){
		$("#opcionCuerpo").html('<div id="tab"> <ul id="listaTabs"> </ul></div>');
		$.each(data, function(i,aficion){
			$("#listaTabs").append('<li><a href="#tab-'+aficion.id+'">'+aficion.nombre+'</a></li>');
			$("#tab").append('<div id="tab-'+aficion.id+'">'+
				'<p align="center"><div id="'+aficion.id+'">'+aficion.contenido+'</div><br>'+
				'<p align="center"><a id="boton-guardar'+aficion.id+'" class="dialog_link ui-state-default ui-corner-all" href="javascript:void(0)"><span class="ui-icon ui-icon-disk"></span>Guardar</a>'+
				'</p><br></p>'+
			'</div>');
			
			$('#'+aficion.id).editor({height:80, width:700});
			
			$('#boton-guardar'+aficion.id+', ul#icons li').hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
			);
			
			
			$('#boton-guardar'+aficion.id).click(
					function() { 
							$('#'+aficion.id).editor({send: "consultasAjax.php?seccion=perfilUsuario&"+aficion.id+"=1", callback: function(){ mensajeSistema("Informacion sobre "+aficion.nombre+"<br>guardada"); },clean: false});
						}
			);
			
		});
		$("#tab").tabs();
	});
}

function cargarPersonalizar()
{
	$("#opcionTitulo").text("Personalizar mi cuenta");
	$("#opcionCuerpo").html('Apariencia de la pagina: <div id="switcher"></div>');
	$("#opcionCuerpo").append('<br>Tu fuente personalizada:'+
							'<div id="fuente">Asi se ven ahora tus comentarios. Puedes cambiar el formato y ver los cambios en el texto de prueba de debajo</div><br><br>'+
							'<div>Color: <input readonly class="text ui-widget-content ui-corner-all ac_input" type="text" id="selectorColor" /></div>'+
							'<div>Fuente: <select id="selectorFuente"><option>Cargando...</option></select></div>');
	//$("#textoPrueba").attr("style","color: #3366FF; font-family: verdana,geneva;");
	$('#switcher').themeswitcher();
	$("#selectorColor").attachColorPicker();
	$("#selectorColor").change(function() {$("#fuente").css("color",$("#selectorColor").val())});
	
	
	$.getJSON("consultasAjax.php",{seccion:"personalizacion",info:true},function(data){
		var lista = $("#selectorFuente");
		$("#selectorColor").val(data.color);
		$(".ColorPickerDivSample").css("background-color",data.color);
		$('#fuente').css('font-family',data.fuente);
		$('#fuente').css('color',data.color);
				
		lista.html("");
		lista.prepend('<option value="'+data.fuente+'">'+data.fuente+'</option>');
		$.getJSON("consultasAjax.php",{seccion:"listaFuentes"},function(data){
			$.each(data, function(i,fuente)
			{
				lista.append('<option value="'+fuente+'" callback="$(\'#fuente\').css(\'font-family\',\''+fuente+'\')">'+fuente+'</option>')
			});
			$("#selectorFuente").combo();
		});
		
		
	});
	
	//Boton guardar
	var botonGuardar = $('<a id="boton-guardarDatosPersonales" class="dialog_link ui-state-default ui-corner-all" href="javascript:void(0)"><span class="ui-icon ui-icon-disk"/>Guardar cambios</a>');
	botonGuardar.hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	
	botonGuardar.click(
		function() {
			$.getJSON("consultasAjax.php?seccion=personalizacion",{ fuente: $("#fuente").css("font-family"), color: $("#selectorColor").val()},
			function(data){
				if(data.error == 0)
				{
					mensajeSistema("Datos personales cambiados");
				}
				else
				{
					mensajeSistema("Error al guardar los cambios");
				}
			});

			}
	);
	$("#opcionCuerpo").append("<br><br>").append($("<div align='center'>").append(botonGuardar)).append("<br>");

}

$(document).ready(function() {
	
	$("#listaOpciones a").hover(
					function() { $(this).addClass('ui-state-hover'); }, 
					function() { $(this).removeClass('ui-state-hover'); }
				);
				
	$("#boton-datosPersonales").click(
					function() {
						cargarDatosPersonales();
						//window.location.href = "#cuenta&opcion=datosPersonales";
					});
					
	$("#boton-editarPerfil").click(
					function() {
						cargarEditarPerfil();
						//window.location.href = "#cuenta&opcion=editarPerfil";
					});
					
	$("#boton-aplicaciones").click(
					function() {
						cargarAplicaciones();
						//window.location.href = "#cuenta&opcion=aplicaciones";
					});
					
	$("#boton-personalizar").click(
			function() {
				cargarPersonalizar();
				//window.location.href = "#cuenta&opcion=aplicaciones";
			});
});
